@layout("/common/_container.html"){
<style>
    .informationBox{ display: flex ; padding: 15px 20px ; }
    .informationBox > div { flex: 1 ; }
    .information_left > div ,.information_right > div { display: flex ; align-items: center ; margin: 15px 0 ; }
    .information_left > div span,.information_right > div span{ flex: 1 ;}
    .information_left > div div,.information_right > div div{ flex: 3 ;}

    .projectBox{  padding: 15px 20px ; }
    .projectBox > div { display: flex ; margin: 15px 0 ; }
    .projectBox > div > div { flex: 1 ; display: flex ; align-items: center;}
    .projectBox > div > div span { flex: 1 ; }
    .projectBox > div > div div { flex: 2 ; }

    .asterisk{ color: red; margin-left: 5px;}
    .input_style {  width: 70%;  height: 34px;  border: 1px solid #cccccc;  border-radius: 5px;  padding-left: 10px;  }
    .select_style{  width: 88%;  height: 34px;  border: 1px solid #cccccc;  border-radius: 5px;  padding-left: 10px;  }
    .title_h {  border-bottom: 1px solid #dddddd;  margin: 0;  padding-bottom: 10px;  text-indent: 1em  }
    .btnBox {  float: right;  width: 23%;  }
    .btnBox button {  background: #30add1;  color: white;  width: 96px;  }
</style>
<div class="ibox float-e-margins">
    <div class="ibox-content">
        <div class="form-horizontal" id="reservationsInfoForm">
            <div style="display: none">
                <input type="hidden" id="id" value="">
                <input type="hidden" id="oneChannelValue" value="">
                <input type="hidden" id="twoChannelValue" value="">
                <input type="hidden" id="thrChannelValue" value="">
                <input type="hidden" id="oneMediumValue" value="">
                <input type="hidden" id="twoMediumValue" value="">
                <input type="hidden" id="thrMediumValue" value="">
            </div>
            <!--基本信息-->
            <div class="row">
                <h4 class="title_h">基本信息</h4>
                <div class="informationBox">
                    <div class="information_left">
                        <div>
                            <span>姓名<span class="asterisk">*</span></span>
                            <div><input id="customerName" name="姓名" type="text" class="input_style"></div>
                        </div>
                        <div>
                            <span>预约号<span class="asterisk">*</span></span>
                            <div>
                                <input id="reservationsNum" name="预约号" type="text" class="input_style">
                            </div>
                        </div>
                        <div>
                            <span>年龄</span>
                            <div>
                                <input id="customerAge" name="年龄" type="text" class="input_style" oninput="value=value.replace(/[^\d]/g,'')">
                            </div>
                        </div>
                        <div>
                            <span>QQ</span>
                            <div>
                                <input id="qqNumber" name="QQ号" type="text" class="input_style" oninput="value=value.replace(/[^\d]/g,'')">
                            </div>
                        </div>
                        <div>
                            <span>其他联系方式</span>
                            <div>
                                <input id="otherContact" name="其他联系方式" type="text" class="input_style" oninput="value=value.replace(/[^\d]/g,'')">
                            </div>
                        </div>
                    </div>
                    <div class="information_right">
                        <div>
                            <span>性别</span>
                            <div style="height: 34px;line-height: 34px;">
                                <label style="margin: 0 0 0 10px;cursor: pointer"><input type="radio" name="sex" value="1" style="margin-right: 5px;">男</label>
                                <label style="margin: 0 0 0 10px;cursor: pointer"><input type="radio" name="sex" value="2" style="margin-right: 5px;">女</label>
                                <label style="margin: 0 0 0 10px;cursor: pointer"><input type="radio" name="sex" value="0" style="margin-right: 5px;" checked="checked">未知</label>
                            </div>
                        </div>
                        <div>
                            <span>电话<span class="asterisk">*</span></span>
                            <div>
                                <input id="customerPhone" name="电话*" type="text" class="input_style" style="width: 45%"
                                       oninput="if(value.length>11)value=value.slice(0,11)">
                                <select name="phoneSharShip" id="phoneSharShip" style="width: 23%;"
                                        class="input_style">
                                    <option value="本人">本人</option>
                                    <option value="爸爸">爸爸</option>
                                    <option value="妈妈">妈妈</option>
                                    <option value="儿子">儿子</option>
                                    <option value="女儿">女儿</option>
                                    <option value="朋友">朋友</option>
                                    <option value="夫妻">夫妻</option>
                                    <option value="其他">其他</option>
                                </select>
                            </div>
                        </div>
                        <div>
                            <span>状态</span>
                            <div>
                                <select id="statuss" name="statuss" class="input_style">
                                    <option value="预约">预约</option>
                                    <option value="待定">待定</option>
                                    <option value="跟进">跟进</option>
                                </select>
                            </div>
                        </div>
                        <div>
                            <span>微信</span>
                            <div>
                                <input id="wechatNumber" name="微信号" type="text" class="input_style">
                            </div>
                        </div>
                        <div>
                            <span>关键词</span>
                            <div>
                                <input id="keyWord" name="关键词" type="text" class="input_style">
                            </div>
                        </div>
                    </div>
                </div>

            </div>
            <!--项目信息-->
            <div class="row">
                <h4 class="title_h">项目信息</h4>
                <div class="projectBox">
                    <div>
                        <div>
                            <span>预约项目<span class="asterisk">*</span></span>
                            <div>
                                <select id="appointmentPayService" name="appointmentPayService" class="select_style"></select>
                            </div>
                        </div>
                        <div>
                            <span>预约时间<span class="asterisk">*</span></span>
                            <div>
                                <input name="appointmentArrivalTime" id="appointmentArrivalTime" class="select_style"
                                       onclick="laydate({istime: true, format: 'YYYY-MM-DD hh:mm:ss'})"/>
                            </div>
                        </div>
                        <div>
                            <span>预约门诊<span class="asterisk">*</span></span>
                            <div>
                                <select id="outpatientName" name="outpatientName" class="select_style"></select>
                            </div>
                        </div>
                    </div>
                    <div>
                        <div>
                            <span>访问病种</span>
                            <div>
                                <select id="accessDisease" name="accessDisease" class="select_style">
                                    <option value="">请选择</option>
                                    <option value="种植">种植</option>
                                    <option value="正畸">正畸</option>
                                    <option value="修复">修复</option>
                                    <option value="美白">美白</option>
                                    <option value="拔牙智齿">拔牙智齿</option>
                                    <option value="牙周">牙周</option>
                                    <option value="洗牙洁牙">洗牙洁牙</option>
                                    <option value="医院类">医院类</option>
                                    <option value="儿童齿科">儿童齿科</option>
                                </select>
                            </div>
                        </div>
                        <div>
                            <span>经济能力</span>
                            <div>
                                <select id="economicAbility" name="经济能力" class="select_style"></select>
                            </div>
                        </div>
                        <div>
                            <span>是否大单</span>
                            <div>
                                <select id="isLarge" name="是否大单" class="select_style">
                                    <option value="1">是</option>
                                    <option value="2">否</option>
                                </select>
                            </div>
                        </div>
                    </div>
                    <div>
                        <div>
                            <span>职业</span>
                            <div><select id="occupation" name="职业" class="select_style"></select></div>
                        </div>
                        <div>
                            <span>障碍点</span>
                            <div><input id="obstaclePoint" name="障碍点" class="select_style"/></div>
                        </div>
                        <div>
                            <span>建档人</span>
                            <div><input id="archiving" name="建档人" value="${userName}" class="select_style" readonly="readonly"/></div>
                        </div>
                    </div>
                    <div>
                        <div>
                            <span>一级渠道</span>
                            <div><select id="oneChannel" name="oneChannel" class="select_style"></select></div>
                        </div>
                        <div>
                            <span>二级渠道</span>
                            <div><select id="twoChannel" name="twoChannel" class="select_style"></select></div>
                        </div>
                        <div>
                            <span>三级渠道</span>
                            <div><select id="thrChannel" name="thrChannel" class="select_style"></select></div>
                        </div>
                    </div>
                    <div>
                        <div>
                            <span>一级媒介</span>
                            <div><select id="oneMedium" name="oneMedium" class="select_style"></select></div>
                        </div>
                        <div>
                            <span>二级媒介</span>
                            <div><select id="twoMedium" name="twoMedium" class="select_style"></select></div>
                        </div>
                        <div>
                            <span>三级媒介</span>
                            <div><select id="thrMedium" name="thrMedium" class="select_style"></select></div>
                        </div>
                    </div>
                    <div>
                        <div>
                            <span>地址</span>
                            <div><input id="address" name="address" class="select_style"></input></div>
                        </div>
                        <div>
                            <span>消费能力</span>
                            <div><select id="consumAbility" name="consumAbility" class="select_style"></select></div>
                        </div>
                        <div>
                            <span>消费习惯</span>
                            <div><select id="consumptionHabits" name="consumptionHabits" class="select_style"></select></div>
                        </div>
                    </div>
                    <div>
                        <div>
                            <span>婚姻状况</span>
                            <div>
                                <select id="maritalStatus" name="maritalStatus" class="select_style">
                                    <option value="0">请选择</option>
                                    <option value="1">已婚</option>
                                    <option value="2">未婚</option>
                                    <option value="3">离异</option>
                                 </select>
                            </div>
                        </div>
                        <div>
                            <span>有无小孩</span>
                            <div><select id="isHaveChildren" name="isHaveChildren" class="select_style">
                                <option value="0">请选择</option>
                                <option value="1">有</option>
                                <option value="2">无</option>
                            </select></div>
                        </div>
                        <div>
                            <span>性格</span>
                            <div><select id="characters" name="characters" class="select_style"></select></div>
                        </div>
                    </div>
                </div>

            </div>
            <!--其他信息-->
            <div class="row">
                <h4 class="title_h">其他信息</h4>
                <div style="display: flex;padding: 15px 20px;">
                    <div style="flex: 1;">
                        <p>备注</p>
                        <textarea id="remarks" name="remarks" rows="6" style="width: 95%"></textarea>
                    </div>
                    <div style="flex: 1;">
                        <p>聊天记录</p>
                        <textarea id="content" name="content" rows="6" style="width: 95%"></textarea>
                    </div>
                </div>

            </div>
            <!--button按钮-->
            <div class="row clearfix">
                <div class="btnBox">
                    <button type="button" class="btn" onclick="ReservationsInfoDlg.addSubmit()">提交</button>
                    <button type="button" class="btn" style="background:#999999;" onclick="ReservationsInfoDlg.close()">取消</button>
                </div>
            </div>
        </div>
    </div>
</div>
<script src="${ctxPath}/static/modular/marketing/reservations/reservations_info.js"></script>
<script src="${ctxPath}/static/js/common/jsChannel.js"></script>
<script src="${ctxPath}/static/js/common/jsMedium.js"></script>
<script type="text/javascript">
    var oneChanneli = document.getElementById("oneChannelValue").value;
    var twoChanneli = document.getElementById("twoChannelValue").value;
    var thrChanneli = document.getElementById("thrChannelValue").value;
    var oneMediumi = document.getElementById("oneMediumValue").value;
    var twoMediumi = document.getElementById("twoMediumValue").value;
    var thrMediumi = document.getElementById("thrMediumValue").value;
    var ChannelList;
    //初始化下拉渠道列表
    $.post(Feng.ctxPath + "/channel/getChannels", function (data) {
        ChannelList = data;
        channelInit('oneChannel', 'twoChannel', 'thrChannel');
    }, "json");
    //初始化下拉媒介列表
    $.post(Feng.ctxPath + "/medium/getMedium", function (data) {
        MediumList = data;
        mediumInit('oneMedium', 'twoMedium', 'thrMedium');
    }, "json");
    //初始化下拉职业列表
    $.post(Feng.ctxPath + "/occupation/getList", function (data) {
        var txt = '<option value="">--请选择职业--</option>';
        for (var i = 0; i < data.length; i++) {
            txt += '<option value="' + data[i].occupation + '">' + data[i].occupation + '</option>';
        }
        document.getElementById('occupation').innerHTML = txt;
        //状态单选
        var seleteoccupation = $('#occupationValue').val();
        if (seleteoccupation != "") {
            $("#occupation option[value=" + seleteoccupation + "]").attr("selected", "selected");
        }
    }, "json");
    //初始化下拉消费习惯列表
    $.post(Feng.ctxPath + "/consumptionHabits/getList", function (data) {
        var txt = '<option value="">--请选择消费习惯--</option>';
        for (var i = 0; i < data.length; i++) {
            txt += '<option value="' + data[i].consumption_habits + '">' + data[i].consumption_habits + '</option>';
        }
        document.getElementById('consumptionHabits').innerHTML = txt;
        //状态单选
        var seleteconsumptionHabits = $('#consumptionHabitsValue').val();
        if (seleteconsumptionHabits != "") {
            $("#consumptionHabits option[value=" + seleteconsumptionHabits + "]").attr("selected", "selected");
        }
    }, "json");
    //初始化下拉性格列表
    $.post(Feng.ctxPath + "/character/getList", function (data) {
        var txt = '<option value="">--请选择性格--</option>';
        for (var i = 0; i < data.length; i++) {
            txt += '<option value="' + data[i].characters + '">' + data[i].characters + '</option>';
        }
        document.getElementById('characters').innerHTML = txt;
        //状态单选
        var seletecharacters = $('#charactersValue').val();
        if (seletecharacters != "") {
            $("#characters option[value=" + seletecharacters + "]").attr("selected", "selected");
        }
    }, "json");
    $.post(Feng.ctxPath + "/consumAbility/getList", function (data) {
        var txt = '<option value="">--请选择消费能力--</option>';
        for (var i = 0; i < data.length; i++) {
            txt += '<option value="' + data[i].consum_ability + '">' + data[i].consum_ability + '</option>';
        }
        document.getElementById('consumAbility').innerHTML = txt;
        //状态单选
        var seleteconsumAbility = $('#consumAbilityValue').val();
        if (seleteconsumAbility != "") {
            $("#consumAbility option[value=" + seleteconsumAbility + "]").attr("selected", "selected");
        }
    }, "json");
</script>
@}